<template>
  <AppTitleBox class="app-title-box" :title="title">
    <div class="treeBox" ref="treeBox" v-loading="loading">
      <el-tree :data="treeData" node-key="id" :props="{ children: 'children' }" highlight-current :expand-on-click-node="false" @node-click="nodeClick">
        <template #default="{ data }">
          <div class="tree-node">
            {{ data.name }}
          </div>
        </template>
      </el-tree>
    </div>
  </AppTitleBox>
</template>

<script>
import { defineComponent } from "vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
export default defineComponent({
  components: {
    AppTitleBox,
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  emits: ["nodeClick"],
  data() {
    return {};
  },
  methods: {
    nodeClick(node) {
      this.$emit("nodeClick", node);
    },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.app-title-box {
  height: 100%;
  .tree-node {
    width: 100%;
  }
}
</style>
